<!DOCTYPE html>
<html>
<head>
  <!-- 页面meta -->
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>web作业四_用户粗粒度权限控制</title>
  <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
  <!-- 引入样式 -->
  <link rel="stylesheet" href="./plugins/elementui/index.css">
  <link rel="stylesheet" href="./css/style.css">
</head>
<body class="hold-transition">
<div id="app">
  <div style="width: 300px;height: 400px;margin: 200px auto;">
    <el-form label-position="left" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="0px"
             style="height: 300px;"
             class="demo-ruleForm login-container">
      <h3 class="title">用户登录</h3>
      <el-form-item prop="username">
        <el-input type="text" v-model="ruleForm.username" auto-complete="off" placeholder="账号"></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input type="password" v-model="ruleForm.password" auto-complete="off" placeholder="密码"></el-input>
      </el-form-item>

      <el-form-item style="width:100%;">
        <el-button type="primary" style="width:100%;" @click="submitForm()" :loading="logining">登录
        </el-button>
      </el-form-item>

      <el-form-item style="width:30%;float: right;clear: both">
        <el-button @click="tourist()">游客访问
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</div>
</body>

<!-- 引入组件库 -->
<script src="./js/vue.js"></script>
<script src="./plugins/elementui/index.js"></script>
<script src="./js/axios-0.18.0.js"></script>

<script>
  let vue = new Vue({
    el: '#app',
    data() {
      return {
        logining: false,
        ruleForm: {
          username: '',
          password: '',
        },
        rules: {
          username: [{required: true, message: '请输入账号', trigger: 'blur'}],
          password: [{required: true, message: '请输入密码', trigger: 'blur'}],
        }
      }
    },
    methods: {
      submitForm() {
        if (this.ruleForm.username === '') {
          this.$message({
            message: '请输入账号!',
            type: 'warning'
          });
          return
        }
        if (this.ruleForm.password === '') {
          this.$message({
            message: '请输入密码!',
            type: 'warning'
          });
          return;
        }

        axios.post('/user/login', this.ruleForm).then((res) => {
          if (res.data.code === 200) {
            this.$message({
              message: res.data.message,
              type: 'success'
            });
            // 将用户信息存储到localStorage中
            window.localStorage.setItem("wh_userInfo",JSON.stringify(res.data.data))
            // 跳转到home
            window.location.href = './pages/home.html'
          } else {
            this.$message.error(res.data.message);
          }
        });
      },
      tourist() {
        window.location.href = './pages/tourist.html'
      }
    }
  })

</script>

</html>